{% extends 'base.html' %}
{% block title %}Brisbane Coupon{% endblock %}

{% load thumbnail %}

{% block stylesheet %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />
<style type="text/css">
#map_canvas {
    width: 446px;
    height: 362px;
}
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/jquery.fn.gmap.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
    var centerLatlng = new google.maps.LatLng({{ store.latitude }}, {{ store.longitude }}-0.0045);
    var latlng = new google.maps.LatLng({{ store.latitude }}, {{ store.longitude }});
    $("#map_canvas").gmap({"zoom":15, "center": centerLatlng}).bind("init", function(ev, map) {
        $("#map_canvas").gmap("addMarker", {"position": latlng, "bounds": false}).click(function() {
            //$("#map_canvas").gmap("openInfoWindow", {"content": "Hello World!" }, this);
        });
        $("#map_canvas").gmap("addControl", "sidebar", 1);
    });
    
    {% if not my_favorite %}
    tkstickyMsg("Please like me", "info");
    {% endif %}

    
    $(".like").live("click", function() {
    	{% if not user.is_authenticated %}
    	   tkstickyMsg("Login first", "info");
    	{% endif %}
    	
    	var $tmpThis = $(this);
    	var classAttr = $(this).attr("class").split(" ")[1];
        var address = "?like=" + "true";
        $.get(address, function(data) {
            if(data.result.success == true) {
                if(classAttr == "cLikebtnHover") {
                	$tmpThis.removeClass("cLikebtnHover").addClass("cLikebtn");
                	tkstickyMsg("Removed favorite store", "bad");
                } else {
                	$tmpThis.removeClass("cLikebtn").addClass("cLikebtnHover");
                	tkstickyMsg("Added favorite store", "good");
                }
            }
        });
    });
    
    
    //Facebook like
    if(typeof(FB) !== 'undefined')
         FB.XFBML.parse(document.getElementById('fblike'));

    //Google plus one
    if(typeof(gapi) !== 'undefined') {
        gapi.plusone.render(document.getElementById('gplus'),{
            'href':location.href,
            'annotation':'bubble',
            'width': 90,
            'align': 'left',
            'size': 'medium'
        });
    }

    //Twitter tweet button
    if(typeof(twttr) !== 'undefined') {
        $('.twitter-share-button').attr('data-url',location.href);
        twttr.widgets.load();
    }
});
</script>
{% endblock%}

{% block content %}

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="dRightAdLayout">
  <div id="dRightAd">
    <div class="cCircle">
    </div>
    <span class="cRightTitle">유사가게</span>
    <div id="dRightAdin">
      <ul>
        {% for s in store.get_similar_stores %}
        <li><a href="{{ s.url }}">{{ s.name }}</a></li>
        {% empty %}
        <li><a href="#">유사가게가 없습니다</a></li>
        {% endfor %}
      </ul>
    </div> <!-- dRightAdin -->
  </div> <!-- dRightAd -->
  <br>
  <div id="dRightAd">
    <div class="cCircle">
    </div>
    <span class="cRightTitle">근처가게(주변3km)</span>
    <div id="dRightAdin">
      <ul>
        {% for s in store.get_near_stores %}
        <li><a href="{{ s.url }}">{{ s.name }}</a></li>
        {% empty %}
        <li><a href="#">근처가게가 없습니다</a></li>
        {% endfor %}
      </ul>
    </div> <!-- dRightAdin -->
  </div> <!-- dRightAd -->
</div> <!-- dRightAdLayout -->

<div id="dWrapper">

  <div id="dStoreTitle">
    <div {% if my_favorite %}class="like cLikebtnHover"{% else %}class="like cLikebtn"{% endif %}><a href="#"></a></div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <h1><a href="{{ store.url }}">{{ store.name}}</a></h1>
      </td>
      <td class="cStoreCategory"><a href="{% url stores %}?q={{ store.category.name }}">{{ store.category.name }}</a></td>
      <td width="15%"><fb:like expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false' width='450' colorscheme='light'></fb:like></tr>
    </table>
  </div>
  
  <div id="dLineContent">
    <div id="dStoreDetail">
      <div id="dStoreDetailIn">
        <ul>
          {% if store.addr %}
          <li>Address : {{store.detail_addr}} {{store.addr}}</li>
          {% endif %}
          {% if store.tel1 %}
          <li>Phone : {{ store.tel1 }}</li>
          {% endif %}
          {% if store.tel2 %}
          <li>Phone : {{ store.tel2 }}</li>
          {% endif %}
          {% if store.internet_tel %}
          <li>Internet Phone : {{ store.internet_tel }}</li>
          {% endif %}
          {% if store.mobile1 %}
          <li>Mobile Phone : {{ store.mobile1 }}</li>
          {% endif %}
          {% if store.mobile2 %}
          <li>Mobile Phone : {{ store.mobile2 }}</li>
          {% endif %}
          {% if store.fax %}
          <li>Fax : {{ store.fax }}</li>
          {% endif %}
          {% if store.kakao %}
          <li>Kakao : {{ store.kakao }}</li>
          {% endif %}
          {% if store.email %}
          <li>Email : {{ store.email }}</li>
          {% endif %}
          {% if store.website %}
          <li>website : <a href="{{ store.website }}">{{ store.website }}</a></li>
          {% endif %}
          {% if store.trading_hours %}
          <li>Hour<p>{{ store.trading_hours|safe }}</p></li>
          {% endif %}
        </ul>
      </div> <!-- dStoreDetailIn -->
    </div> <!-- dStoreDetail -->
    <div id="dGoogleMap">
      {% if store.addr %}
      <div id="map_canvas"></div>
      {% else %}
      <img src="{{ STATIC_PREFIX }}images/d/no-map.gif">
      {% endif %}
    </div> <!-- dGoogleMap -->
  </div> <!-- dLineContent -->
  
  
  {% if store.branchs.all %}
  <div id="dStoreTitle">
    <h2 class="cEvent">Branchs</h2>
  </div>
  {% endif %}
  {% for branch in store.branchs.all %}
  <div id="dLineContent">
    <div id="dStoreDetail">
      <div id="dStoreDetailIn">
        <ul>
          <li><a href="{{ branch.url }}">{{ branch.name }}</a></li>
          <li>Address : {{ branch.detail_addr }} {{ branch.addr }}</li>
          {% if branch.tel1 %}
          <li>Phone : {{ branch.tel1 }}</li>
          {% endif %}
          {% if branch.tel2 %}
          <li>Phone : {{ branch.tel2 }}</li>
          {% endif %}
          {% if branch.internet_tel %}
          <li>Internet Phone : {{ branch.internet_tel }}</li>
          {% endif %}
          {% if branch.mobile1 %}
          <li>Mobile Phone : {{ branch.mobile1 }}</li>
          {% endif %}
          {% if branch.mobile2 %}
          <li>Mobile Phone : {{ branch.mobile2 }}</li>
          {% endif %}
          {% if branch.fax %}
          <li>Fax : {{ branch.fax }}</li>
          {% endif %}
          {% if branch.kakao %}
          <li>Kakao : {{ branch.kakao }}</li>
          {% endif %}
          {% if branch.email %}
          <li>Email : {{ branch.email }}</li>
          {% endif %}
          {% if branch.website %}
          <li>website : <a href="{{ branch.website }}">{{ branch.website }}</a></li>
          {% endif %}
          {% if branch.trading_hours %}
          <li>Hour<p>{{ branch.trading_hours|safe }}</p></li>
          {% endif %}
        </ul>
      </div> <!-- dStoreDetailIn -->
    </div> <!-- dStoreDetail -->
    <div id="dGoogleMap">
      <div id="map_canvas"></div>
    </div> <!-- dGoogleMap -->
  </div> <!-- dLineContent -->
  {% endfor %}
  
  <div id="dStoreTitle">
    <h2 class="cEvent">Events</h2>
  </div>
  <div id="dLineContent">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>Event</th>
        <th>Date</th>
        <th>Coupon Name</th>
        <th width="30%">Coupon</th>
      </tr>
      {% for e in store.event_set.all %}
      <tr>
        <td><a href="{{ e.url }}">{{ e.name|truncatewords:5 }}</a></td>
        <td>{{ e.sdate|date:"D d M" }} - {{ e.edate|date:"D d M" }}</td>
        <td>{{ e.coupon.name }}</td>
        <td width="30%">
          {% if not e.get_coupon_status %}
          <div class="cDowncouponFinish"><a href="#">쿠폰이 없는 이벤트입니다.</a></div>
          {% else %}
          {% ifequal e.get_coupon_status "PAST" %}
          <div class="cDowncouponFinish"><a href="#">이벤트 기간이 끝났습니다.</a></div>
          {% else %}
          <div class="cDowncoupon">
            <a href="{{ e.url }}">모바일 쿠폰받기<span class="cLeftcoupon"><span class="cLeftNumber">{{ e.get_coupon_status }}</span></span></a>
          </div>
          {% endifequal %}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </table>
  </div>

  <div id="dStoreTitle">
    <h2 class="cStoreDes">Description</h2>
  </div>
  <div id="dLineContent">
    {{ store.description|safe }}
  </div>
  
  <div id="dStoreTitle">
    <h2 class="cGallery">Gallery</h2>
  </div>
  <div id="dLineContent">
    {% if store.image1 %}
    {% thumbnail store.image1 "700x400" as im %}
    <img src="{{ im.url }}">
    {% endthumbnail %}
    {% endif %}
  
    {% if store.image2 %}
    {% thumbnail store.image2 "700x400" as im %}
    <img src="{{ im.url }}">
    {% endthumbnail %}
    {% endif %}
  
    {% if store.image3 %}
    {% thumbnail store.image3 "700x400" as im %}
    <img src="{{ im.url }}">
    {% endthumbnail %}
    {% endif %}
  
    {% if store.image4 %}
    {% thumbnail store.image4 "700x400" as im %}
    <img src="{{ im.url }}">
    {% endthumbnail %}
    {% endif %}
  
    {% if store.image5 %}
    {% thumbnail store.image5 "700x400" as im %}
    <img src="{{ im.url }}">
    {% endthumbnail %}
    {% endif %}
  </div>
  <div class="fb-comments" data-href="{{ full_path }}" data-num-posts="5" data-width="800"></div>
</div><!-- dWrapperend-->

{% endblock %}
